<template>
  <div>
    <div class=" row_a_c mb_20">
      <el-button class="scwj color_b_3FC1C9 color_fff" size="mini" @click="handleAddJust">上传版本</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column prop="ulid" label="游戏id"></el-table-column>
      <el-table-column prop="title" label="游戏名"></el-table-column>

      <el-table-column prop="logo" label="logo">
        <template slot-scope="scope">
          <img :src="scope.row.logo" width="50" />
        </template>
      </el-table-column>

      <el-table-column prop="created_at" label="上次更新"></el-table-column>
      <el-table-column prop="remark" label="备注" width="100"></el-table-column>
      <el-table-column label="操作" width="390">
        <template slot-scope="scope">
          <div class="row center">
            <el-button style="background: #EF4F19;color: #fff;" size="small"
              @click="handleUpdateJust(scope.row)">更新版本</el-button>

            <el-button style="background: #20CCC2;color: #fff;margin-left: 10px;" size="small"
              @click="handleUpdateRe(scope.row)">更新资源</el-button>

            <el-button style="background: #20CCC2;color: #fff;margin-left: 10px;" size="small"
              @click="handleUpdateNy(scope.row)">申请联运</el-button>
            <el-button style="background: #306EF2;color: #fff;" size="small"
              @click="handleUpdate(scope.row)">申请入库</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!--增加，更新版本-正式服列表++++++++++++++++++++++++++++++++++++++++++++ -->
    <el-dialog center :title="title" :visible.sync="open_gxbb" width="36%" append-to-body>
      <el-form ref="form_zfs" :model="form_zfs" :rules="rules" label-width="100px" label-position="top">

        <el-form-item label="版本名" prop="title"><el-input v-model="form_zfs.title" /></el-form-item>
        <el-form-item :label="zsbwza" prop="versionFile">
          <el-upload class="upload-demo row_a_c" :action="upload_url" :on-remove="handleRemove" accept=".zip"
            :before-upload="beforeUpload" :on-change="handleChangeZsf" :file-list="fileList" :on-error="errorUpload">
            <el-button type="primary" style="margin-top: 10px;width: 100px;">{{zsbwz}}</el-button>
          </el-upload>
        </el-form-item>


        <div class="explain">压缩文件格式为zip,压缩包包含文件目录结构的完整路径为:Mirserver/Mir200/* (除Mir00下的文件外，其他服务端路径文件无效)
        </div>

        <el-form-item :label="zsbwzb" prop="logo">
          <el-upload :action="upload_url" :headers="headers" :before-upload="handleSetHeaders"
            :on-success="handleLogSuccessZsf" :show-file-list="false" class="avatar-uploader">
            <img v-if="form_zfs.logo" :src="form_zfs.logo" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item :label="zsbwzc" prop="remark"><el-input :rows="4" v-model="form_zfs.remark" type="textarea"
            placeholder="备注信息"></el-input></el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer center">
        <div class="quxiao"><el-button style="width: 200px;height: 40px;margin-right: 30px;" @click="open_gxbb=false">取
            消</el-button></div>

        <el-button style="width: 200px;height: 40px;" type="primary" @click="submitFormZsf">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 更新版本-正式服列表================================================== -->

  </div>
</template>

<script>
  import * as Auth from '@/utils/auth';
  import * as Games from '@/api/system/games';
  import * as Version from '@/api/system/version';


  export default {
    name: 'formalDress',
    components: {

    },
    data() {
      return {
        zsbwz: '点击上传',
        zsbwza: '版本上传入口',
        zsbwzb: 'logo上传',
        zsbwzc: '备注',
        userId: '',
        user_id: '',
        id: '', //更新id
        fileList: [],
        upload_url: process.env.VUE_APP_BASE_URL + '/file/upload',
        headers: Auth.getHeader(),
        logo: '',
        // 总条数
        total: 0,
        // 字典表格数据
        tableData: [],
        // 弹出层标题
        title: '',
        // 是否显示弹出层
        open_gxbb: false,

        // 查询参数
        queryParams: {
          noPage: 1,
          pageSize: 10
        },


        form_zfs: {},


        // 表单校验
        rules: {
          title: [{
            required: true,
            message: '版本名不能为空',
            trigger: 'change'
          }],
          // versionFile: [{
          //   required: true,
          //   message: '版本更新文件不能为空',
          //   trigger: 'blur'
          // }],
          logo: [{
            required: true,
            message: 'logo不能为空',
            trigger: 'blur'
          }],


        },
        loading: false,
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      };
    },
    created() {
      // 读取缓存
      this.nickname = localStorage.getItem('username')
      this.userId = localStorage.getItem('user_id')
      this.getList();


    },
    mounted() {},
    methods: {

      errorUpload(err) {
        this.resourceFile = '';
        this.$message.error('上传文件过大或格式不正确');
      },
      
      /** 更新资源按钮操作 */
      handleUpdateRe(row) {
        this.openRe = true;
        this.baoshow = 1;
        this.fileList = [];
        console.log('zyfrom-945', row)
        this.getResVeList(row.ulid)
        this.zyfrom.version = row.ulid
        this.zyfrom.versionNumber = row.version_id
      },
      

      beforeUpload(file) {
        const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);

        const whiteList = ["zip"];

        if (whiteList.indexOf(fileSuffix) === -1) {
          this.$message.error('上传文件只能是 zip格式');
          return false;
        }

        const isLt2M = file.size / 1024 / 1024 / 1024 < 2;

        if (!isLt2M) {
          this.$message.error('上传文件大小不能超过 2MB');
          return false;
        }
      },

      handleSetHeaders() {
        this.headers = Auth.getHeader();
      },

      /****正式服Logo上传*****/
      handleLogSuccessZsf(res) {
        this.$set(this.form_zfs, 'logo', res.data);
      },

      handleChangeZsf(file, fileList) {
        if (file.response) {
          this.form_zfs.versionFile = file.response.data
        }
        this.fileList = fileList.slice(-1);

      },
      handleRemove(file, fileList) {
        this.fileList = [];

      },

      /** 正式服提交按钮 */
      submitFormZsf: function() {
        this.$refs["form_zfs"].validate(valid => {
          if (valid) {
            this.form_zfs.user = this.userId
            this.form_zfs.nickname = this.nickname
            this.form_zfs.type_pj = 1
            this.form_zfs.state = 1
            this.loading = true;
            Version.Add(this.form_zfs).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open_gxbb = false;
              this.getList();
            }).catch(error => {
              this.loading = false;
            });
          }
        });

      },

      /** 上传版本按钮操作---正式服列表 */
      handleAddJust() {
        this.fileList = [];
        this.form_zfs = {};
        this.title = '上传版本';
        this.zsbwz = '点击上传';
        this.zsbwza = '版本上传入口';
        this.zsbwzb = 'logo上传';
        this.zsbwzc = '备注';
        this.open_gxbb = true;
      },

      /** 更新版本按钮操作---正式服列表 */
      handleUpdateJust(row) {
        this.fileList = [];
        // this.form_zfs.versionFile = '';
        this.$set(this.form_zfs, 'versionFile', '');
        console.log('row', row)
        this.title = '更新版本';
        this.zsbwz = '点击更新';
        this.zsbwza = '版本更新入口';
        this.zsbwzb = 'logo更新';
        this.zsbwzc = '备注更新';
        this.form_zfs = row;
        this.open_gxbb = true;
      },

      /** 联运修改按钮操作 */
      handleUpdateNy(row) {
        const id = row.id;
        Games.Show(id).then(response => {
          console.log('handleUpdateNy', response.data);
          this.id = row.id;
        });
      },

      /** 申请入库按钮操作 */
      handleUpdate(row) {

      },

      /** 查询列表 */
      getList() {

        this.queryParams.user = this.userId
        this.queryParams.type_pj = 1

        this.loading = true;
        Version.getList(this.queryParams).then(response => {
          this.tableData = response.data.list;
          this.total = response.data.pagination.totalCount;
          this.loading = false;

        });
      },

    }
  };
</script>

<style lang="scss" scoped>
  .quxiao {
    ::v-deep .el-button {
      border: 1px solid #1a82fb;
      color: #1a82fb;
    }
  }

  ::v-deep .el-input--medium .el-input__inner {
    background: #f3f3f4;
    border: 0px solid #3e68c9;
  }

  ::v-deep .el-textarea__inner {
    border: 0px solid #3e68c9;
    background-color: #f3f3f4;
  }

  .explain {
    line-height: 25px;
    color: red;
  }

  .scwj {
    ::v-deep .el-button--mini {
      font-size: 16px;
      font-weight: bold;
      color: #fff;
    }
  }

  .avatar {
    width: 78px;
    height: 78px;
    display: block;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #000000;
    width: 78px;
    height: 78px;
    line-height: 78px;
    text-align: center;
    background-color: #f4f4f5;
  }

  ::v-deep .el-divider--vertical {
    height: 100px;
  }

  ::v-deep .pagination-container .el-pagination {
    position: relative;
  }



  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }



  ::v-deep .el-dialog__header {
    padding: 20px;
    padding-bottom: 0;
  }




  ::v-deep .el-tabs__item:hover {
    color: #3FC1C9;
  }


  ::v-deep .el-tabs--top .el-tabs__item.is-top:nth-child(2),
  .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
  .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
  .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2) {
    padding-left: 20px;
  }

  ::v-deep .el-tabs--top .el-tabs__item.is-top:last-child,
  .el-tabs--top .el-tabs__item.is-bottom:last-child,
  .el-tabs--bottom .el-tabs__item.is-top:last-child,
  .el-tabs--bottom .el-tabs__item.is-bottom:last-child {
    padding-right: 20px;
  }




  ::v-deep .el-button:hover,
  .el-button:focus {
    color: #000000;
    border-color: #A5EDF1;
    background-color: #A5EDF1;
  }


  ::v-deep .el-button:hover,
  .el-button:focus {
    color: #000000;
    border-color: #A5EDF1;
    background-color: #A5EDF1;
  }

  ::v-deep .el-button:hover,
  .el-button:focus {
    color: #000000;
    border-color: #A5EDF1;
    background-color: #A5EDF1;
  }

  ::v-deep .el-tabs__item.is-active {
    color: #000;
  }

  ::v-deep .el-tabs__item:hover {
    color: #3FC1C9;
  }

  ::v-deep .el-tabs__active-bar {
    background-color: #3FC1C9;
  }

  ::v-deep .el-input--medium .el-input__inner {
    background: #fff;
    border: 2px solid #F3F3F4;
  }
</style>
